<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img  src="img/0.png" alt="">
        <img  src="img/0.png" alt="">
        :
        <img  src="img/0.png" alt="">
        <img  src="img/0.png" alt="">
        :
        <img src="img/0.png" alt="">
        <img src="img/0.png" alt="">
    </div>


    <script>

        window.onload = function(){
            showTime();
        }
        
        
        function showTime(){
            setInterval(function(){
                var t = new Date();
                var arr =[
                    parseInt(t.getHours()/10),   
                    t.getHours()%10,
                    parseInt(t.getMinutes()/10),
                    t.getMinutes()%10,
                    parseInt(t.getSeconds()/10),
                    t.getSeconds()%10
                ];     
                var imgs = document.getElementsByTagName("img");
                for(var i=0;i<arr.length;i++){
                    imgs[i].src = "img/"+arr[i]+".png";
                }
        
            },1000);
        }
        
        
    </script>
</body>
</html>